<template>
    <n-config-provider :locale="Locate" :date-locale="DateLocate" :theme="theme" :hljs="hljs">
        <n-loading-bar-provider>
            <n-message-provider>
                <n-modal-provider>
                    <n-dialog-provider>
                        <n-global-style />
                        <view_checking v-if="!store.app.initlized" />
                        <router-view v-else />
                    </n-dialog-provider>
                </n-modal-provider>
            </n-message-provider>
        </n-loading-bar-provider>
    </n-config-provider>
</template>
<script setup lang="ts">
import { computed } from 'vue'

import { zhCN, dateZhCN, darkTheme } from 'naive-ui'
import {
    NConfigProvider,
    NLoadingBarProvider,
    NMessageProvider,
    NModalProvider,
    NDialogProvider,
    NGlobalStyle
} from 'naive-ui'
import { useMainStore } from '@/utils/store'
import hljs from 'highlight.js'
import view_checking from './views/checkin/view_checking.vue'

const Locate = zhCN
const DateLocate = dateZhCN

const store = useMainStore()
const theme = computed(() => {
    document.body.classList.toggle('dark', store.app.setting.ui.dark)  
    return store.app.setting.ui.dark ? darkTheme : null
})
</script>
